<template>
    <div>
        <el-row id="top" :gutter="15" style="margin-bottom:20px">
            <el-col :span="6">
                <el-card class="mini_card">
                    <i class="el-icon-s-flag" style="font-size: 26px;color:#D32F2F"></i>
                    当前鸽棚：<i style="font-size: 26px;font-weight:bold;">{{ currentDovecote.dovecoteNumber }}</i>
                    <el-button type="text" @click="showDialog()">切换</el-button>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="mini_card">
                    <i class="el-icon-s-home" style="font-size:26px;color:#3F51B5"></i>
                    鸽笼数量：<i style="font-size: 26px;font-weight:900;color:#03A9F4">{{ currentDovecote.cageAmount }}</i>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="mini_card">
                    <i class="el-icon-s-custom" style="font-size:26px;color:#03A9F4"></i>
                    饲养员：<i style="font-size: 26px;font-weight:900;color:#FF9800">{{ currentDovecote.director }}</i>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="mini_card">
                    <i class="el-icon-star-on" style="font-size:26px;color:#FFEB3B"></i>
                    绩效冠军：<i style="font-size: 26px;font-weight:900;color:#8BC34A">A01</i>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="37%"
        >
            <div class="pricing">
                <div
				class="[ price-option price-option--mid ]"
				v-for="item in allDovecoteInfo"
				:key="item.dovecoteId"
				@click="selectDovecote(item)"
				>
                  <div class="price-option__detail">
                    <span class="price-option__cost">{{ item.dovecoteNumber }}</span>
                    <!-- <span class="price-option__type">Superuser</span> -->
                  </div>
                  <a href="#" class="price-option__purchase">{{ item.director }}</a>
                </div>
                <!-- <div class="[ price-option price-option--mid ]">
                  <div class="price-option__detail">
                    <span class="price-option__cost">A02</span>
                    <span class="price-option__type">Poweruser</span>
                  </div>
                  <a href="#" class="price-option__purchase">陈蕙兰</a>
                </div>
                <div class="[ price-option price-option--low ]">
                  <div class="price-option__detail">
                    <span class="price-option__cost">A01</span>
                    <span class="price-option__type">Freeuser</span>
                  </div>
                  <a href="#" class="price-option__purchase">张文强</a>
                </div> -->
            </div>

            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>

</template>

<script>

export default {
    name: 'DovecoteInfo',

    data() {
        return {
            dialogVisible: false
        }
    },

	computed: {
		allDovecoteInfo: function() {
			// console.log(this.$store.state.Usersetting.AllDovecoteInfo);
			return this.$store.state.Usersetting.AllDovecoteInfo
		},

		currentDovecote: function() {
			return this.$store.state.Usersetting.CurrentDovecote
		}
	},

    methods: {
      selectDovecote( item ) {
          this.$store.commit('setCurrentDovecote', item)
			    this.dialogVisible = false
			    this.$message( {
			    	type: 'success',
			    	message: `切换至鸽棚 ${item.dovecoteNumber}`
			    } )
          // this.$store.state.Usersetting.CurrentDovecote.dovecoteNumber=item.dovecoteNumber;
      },

		// 切换
		showDialog() {
			this.dialogVisible = true;
		}
    }
}
</script>
<style scoped>
.mini_card {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100px;
    font-size: 1rem;
}
.el-dialog__body {
    padding: 5px 20px 20px;
}

.pricing {
  font-size: 0;
  opacity: 1;
  transition: opacity .2s ease;
}

.price-option {
  display: inline-block;
  width: 6.25em;
  vertical-align: middle;
  margin-right: 0.3125em;
  font-size: 16px;
  opacity: 1;
  transition: opacity .2s ease;
}

.price-option:last-child { margin-right: 0; }

.pricing:hover .price-option { opacity: 0.6; }
.pricing:hover .price-option:hover { opacity: 1; }

.price-option__detail {
  padding: 2em 0;
  background: white;
  text-align: center;
}

.price-option--low .price-option__detail  { border-radius: .25em 0 0 0; }
.price-option--mid .price-option__detail  { border-radius: .25em .25em 0 0; }
.price-option--high .price-option__detail { border-radius: 0 .25em 0 0; }

.price-option__cost,
.price-option__type {
  display: block;
}

.price-option__cost {
  font-size: 1.5em;
  color: #383838;
}

.price-option__type {
  font-size: .7em;
  text-transform: uppercase;
  color: #909090;
}

.price-option__purchase {
  position: relative;
  display: block;
  padding: .6em;
  color: white !important;
  font-size: .8em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0,0,0,0.6);
}

.price-option--low .price-option__purchase  { background: #40c9c6; border-radius: 0 0 0 .25em; }
.price-option--mid .price-option__purchase  { background: #36a3f7; border-radius: 0 0 .25em .25em; }
.price-option--high .price-option__purchase { background: #f4516c; border-radius: 0 0 .25em 0; }

.price-option__purchase:before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-style: solid;
}

.price-option--low .price-option__purchase:before  { border-color: transparent transparent #40c9c6; }
.price-option--mid .price-option__purchase:before  { border-color: transparent transparent #36a3f7; }
.price-option--high .price-option__purchase:before { border-color: transparent transparent #f4516c; }

</style>
